<style lang="scss">
.item-slide {
    width: 100%;
    height: 450px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
}

.item-detail-container {
    padding: 0 10px;
}

.item-title {
    font-size: 1.8rem;
    font-weight: bold;
}

.price-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
    padding-bottom: 1rem;
    border-bottom: solid 1px #E0E0E0;
}

.price-detail-panel {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.price-icon {
    font-size: 1.8rem;
    color: #FF6600;
}

.final-price {
    font-size: 3rem;
    font-weight: bold;
    color: #FF6600;
}

.original-price {
    margin-left: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
}

.youhuiquan {
    width: 90%;
    margin: 20px auto;
    background-image: linear-gradient(to left, #f77062 0%, #fe5196 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    color: #ffffff;
    font-weight: bolder;
    padding: 15px 0;
}

.youhuiquan-amount {
    width:65%; 
    font-size: 2.5rem;
    text-align: center;
    border-right: 3px dotted #ffffff;
}

.youhuiquan-lingqu {
    width: 35%;
    text-align: center;
    font-size: 1.8rem;
}

.return-div {
    position: fixed;
    background-color: rgba($color: #000000, $alpha: 0.4);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 5px;
    left: 2rem;
    top: 2rem;
    z-index: 99;
    padding: 0.5rem 0.5rem;
    img {
        width: 100%;
        height: 100%;
    }
}

.bottom-bar {
    width: 100%;
    height: 5rem;
    position: fixed;
    bottom: 0;
    background-color: #E8E8E8;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .return-back-home {
        width: 20%;
        img {
            width: 3.7rem;
            height: 3.7rem;
        }
    }
    .buy-button {
        width: 50%;
        background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
        height: 3rem;
        padding: 0.4rem 0;
        border-radius: 1.5rem;
        .buy-btn-text {
            color: #ffffff;
            font-size: 1.8rem;
            font-weight: 400;
            text-align: center;
        }
    }
}

.tpwd-textarea {
    width: 100%;
    height: 150px;
    font-size: 1.5rem;
}

.tpwd-btn {
    background-color: #FF6600;
    font-size: 1.8rem;
    padding: 0.3rem 0.5rem;
    color: #FFFFFF;
    border-radius: 20px;
    box-shadow: none;
    border: none;
    border-style: none;
    margin-top: 15px;
}

.ant-modal-footer {
    display: none;
}

.detail-progress-panel {
    width: 95%;
    margin: 10px auto;
    .progress-font {
        margin-top: 5px;
        color: #CC0000;
        font-size: 1.8rem;
        font-weight: bold;
    }
}

</style>

<template>
    <div>
        <swiper :options="descSwiper" v-if="picts.length>0">
			<swiper-slide v-for="(itemImg,index) in picts" :key="index" :style="{backgroundImage:'url(' + itemImg + ')', width:'100%', height:'400px', backgroundSize: '100% auto', backgroundRepeat: 'no-repeat', backgroundPositionX: 'center', backgroundPositionY: 'top'}">
            </swiper-slide>
			<!--分页控制器-->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
        <div class="item-detail-container">
            <div class="item-title">{{itemInfo.title}}</div>
            <div class="price-panel">
                <div class="price-detail-panel">
                    <span class="price-icon">￥</span><span class="final-price">{{itemInfo.coupon_final_price}}</span>
                    <v-tag color="#f50" style="margin-left:5px;">拼团价</v-tag>

                    <!-- <span class="original-price"><s>原价:{{itemInfo.zk_final_price}}</s></span> -->
                </div>
                <div class="original-price">已售&nbsp;{{itemInfo.sellNum}}</div>
            </div>

            <!-- <div class="youhuiquan" v-show="itemInfo.coupon_share_url">
                <div class="youhuiquan-amount">{{itemInfo.coupon_amount}}元优惠券</div>
                <div class="youhuiquan-lingqu" @click="requestTbkTpwd()">立即领取</div>
            </div> -->
            <div class="detail-progress-panel">
                <leil-progress-bar :progress="itemInfo.progress"></leil-progress-bar>
                <div class="progress-font">库存剩余:{{itemInfo.remainStock}}</div>
            </div>
        </div>

        <div style="height: 6rem;">&nbsp;</div>
        
        <div class="return-div" @click="returnBack()">
            <img src="/static/img/return.png"/>
        </div>

        <div class="bottom-bar">
            <div class="return-back-home" @click="returnHome()">
                <img src="/static/img/home1.png"/>
            </div>
            <div class="buy-button" @click="requestTbkTpwd()">
                <div class="buy-btn-text">淘口令购买</div>
            </div>
        </div>

        <v-modal title="复制淘口令"
                :visible="visible"
                @ok="handleCancel"
                @cancel="handleCancel">
            <textarea id="tpwd-text" class="tpwd-textarea" v-model="tpwdText"></textarea>
            <button class="tpwd-btn" data-clipboard-action="copy" data-clipboard-target="#tpwd-text" @click="copyText">
                点击复制淘口令
            </button>
        </v-modal>


    </div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
    name: "jhsitem-detail",
    data() {
        return {
            descSwiper: {
				pagination: {
                    el: '.swiper-pagination',
                    // 设置点击可切换
                    clickable: true
                },
                loop: true,
                autoplay: {
                	delay: 3000,
                }
			},
            itemId: '',
            itemInfo: {},
            tpwd: "",
            tpwdText: "",
            copyBtn: null,
            visible: false,
            picts: [],
        }
    },

    mounted: function() {
        window.onscroll = function(){}
        this.copyBtn = new this.clipboard(".tpwd-btn");
        // console.log("clipboard=====================")
        // console.log(this.copyBtn)
        this.itemId = this.$route.query.item_id
        this.queryItemDetail()
        
    },

    methods: {
        queryItemDetail: function() {
            let that = this
            this.axios.get(`/api/item/jhsitem?itemId=${this.itemId}`)
                .then(response => {
                    let item = response.data
                    console.log(item)
                    item.progress = parseInt((item.stock - item.remainStock) / item.stock * 100)
                    item.coupon_final_price = item.groupPrice
                    that.picts.push(item.itemPic)
                    that.itemInfo = item     
                    that.getSignPackage()               
                })
        },

        returnBack: function() {
            // this.$router.go(-1)
            history.back()
        },

        returnHome: function(){
            this.$router.push({path: '/'})
        },

        requestTbkTpwd: function() {
            let that = this
            // let text = "这里是测试淘口令"
            // console.log(this.itemInfo.coupon_share_url)
            if (this.tpwdText) {
                this.visible = true
                return
            }

            let url = this.itemInfo.longUrl.replace(/http/g, "https")
            // console.log(url)
            this.axios.get(`/api/item/tpwd?text=${this.itemInfo.title}&url=${url}&logo=${this.itemInfo.itemPic}&item_id=${this.itemId}`)
                .then(response => {
                    console.log(response.data)
                    if (response.data.error_response) {
                        that.$message.info("淘口令生成失败，请刷新重试")
                        return
                    }
                    that.tpwd = response.data.tbk_tpwd_create_response.data.model
                    that.concatTbkTpwdText()
                })
        },

        concatTbkTpwdText: function() {
            let tpwdText = this.itemInfo.title + "\r\n" + "【在售价】" + this.itemInfo.originalPrice + "\r\n"
            tpwdText = tpwdText + "【拼团价】" + this.itemInfo.groupPrice + "\r\n"
            tpwdText = tpwdText + "【淘口令】" + this.tpwd + "\r\n"
            tpwdText = tpwdText + "--------------------------\r\n"
            tpwdText = tpwdText + "复制这条信息，到【手机淘宝】即可查看"
            this.tpwdText = tpwdText
            this.visible = true
        },

        copyText: function() {
            let _this = this;
            let clipboard = _this.copyBtn
            clipboard.on('success', function() {
                console.log("复制成功")
                _this.$message.info("复制成功")
            })
        },

        handleCancel () {
            this.visible = false;
        },

        getSignPackage: function() {
			let currentUrl = window.location.href
			console.log(currentUrl)
			let urlArr = currentUrl.split("#")
      		let url = encodeURIComponent(urlArr[0])
			this.axios.get(`getAccess.php?url=${url}`)
				.then(res => {
					console.log(res)
					this.setWxConfig(res.data)
				})
				.catch(error => {
					console.log(error)
				})
		},

		setWxConfig: function(data) {
            let itemInfo = this.itemInfo
			let currentUrl = window.location.href
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.nonceStr, // 必填，生成签名的随机串
				signature: data.signature,// 必填，签名
				jsApiList: [
					'onMenuShareTimeline',
					'onMenuShareAppMessage'
				] // 必填，需要使用的JS接口列表
			});
			wx.ready(function() {
				console.log('接口配置信息已经完成')
				wx.onMenuShareTimeline({
					title: itemInfo.title,
					link: currentUrl,
					imgUrl: itemInfo.itemPic,
					success: function() {
						console.log('用户点击按钮回调')
					}
				})

				wx.onMenuShareAppMessage({
					title: itemInfo.title, // 分享标题
					desc: `点击查看详情`, // 分享描述
					link: currentUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: itemInfo.itemPic, // 分享图标
					type: '', // 分享类型,music、video或link，不填默认为link
					dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					success: function () {
						// 用户点击了分享后执行的回调函数
						console.log('用户点击了分享给朋友按钮')
					}
				})
			})
		},


    },

}
</script>

